<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>模板语法</title>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>

        <!--
            Vue模板语法有两大类
                1.插值语法
                    功能：用于解析标签体内容
                    写法：{{xxx}},xxx是js表达式，且可以直接读取到data的所有属性
                2.指令语法
                    功能：用于解析标签（包括：标签属性，标签体内容，绑定事件......）
                    举例：v-bind:href="xxx" 或 简写为 :href="xxx", xxx同样要写js表达式
                         且可以直接读取到data中的所有属性
                    备注：Vue中有很多指令，且形式都是：v-????,此处我们只是拿v-bind举例子
        -->


        <!-- 准备一个容器 -->
        <div id="root" >
            <h1>插值语法</h1>
            <h3>您好 {{name}}</h3>
            <hr>
            <h1>指令语法</h1>
            <a v-bind:href="website.no1.url" v-bind:x="Date.now()">点我去{{website.no1.name}}学习</a>
            <a :href="website.no2.url" :x="Date.now()">点我去{{website.no2.name}}学习</a>
        </div>


        <script type="text/javascript" >
            // 关闭启动时时用测试js的提示
            Vue.config.productionTip = false

            new Vue({
                el:'#root',
                data:{
                    name:'key762',
                    website:{
                        no1:{
                            name:'Bilibili',
                            url:'https://www.bilibili.com/'
                        },
                        no2:{
                            name:'Gitee',
                            url:'https://gitee.com/'
                        }
                    }
                }
            })

        </script>

    </body>
</html>